<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/wk3un7/backstage/lib/css/layui.css" />
<style type="text/css">
  .layui-table-cell{
    height: auto !important;
  }
</style>
</head>
<body>
      <select  id="tiaozhuang" style="width: 150px; height: 50px;margin-left: 41px;border: 2px solid green;margin: 17px;">
        <option value="">请选择商品类名</option>
        <option value="http://localhost:8080/wk3un7/backstage/commodity.jsp">化妆品系列</option>
        <option value="http://localhost:8080/wk3un7/backstage/commodityTwo.jsp">时尚系列</option>
        <option value="http://localhost:8080/wk3un7/backstage/commodityThree.jsp" selected="">珍藏系列</option>
        <option value="http://localhost:8080/wk3un7/backstage/commodityFour.jsp"  selected="">潮流系列</option>
      </select>
      <button class="layui-btn" id="webs"><i class="layui-icon  layui-icon-search style="font-size: 30px; color: #1E9FFF;"></i></button>
     	<div class="layui-form-item" style="position: absolute;top: 26px;left: 254px;" onsubmit="false">
				<div class="layui-form-item">
					<label class="layui-form-label">商品名称</label>
					<div class="layui-input-inline" style="width: 120px;">
						<input type="text" name="loginName" id="txtName"  class="layui-input">
					</div>
					<button class="layui-btn" id="search" data-type="reload"><i class="layui-icon  layui-icon-search style="font-size: 30px; color: #1E9FFF;"></i></button>
				</div>
		</div>
		<table class="layui-hide" id="test" lay-filter="test"></table>
		<script type="text/html" id="toolbarDemo">
		
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="addUser"><i class="layui-icon layui-icon-add-circle style="font-size: 30px; color: #1E9FFF;">添加</i>  </button>
			</div>
		</script>
		<script type="text/html" id="barDemo">
			
			
			
			<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon  layui-icon-edit style="font-size: 30px; color: #1E9FFF;">编辑</i></a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon  layui-icon-delete style="font-size: 30px; color: #1E9FFF;">删除</i></a>

		</script>
		<script type="text/html" id="imgtmp">
			<img src="../{{d.imgUrl}}" style="width: 150px;height: 100px;" />
		</script>
		<!--检查js文件是否引入成功-->
		<script src="/wk3un7/backstage/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
			<script>
			layui.use('table', function() { //加载表格模块
				var table = layui.table;
				var $=layui.jquery;
				table.render({ //初始化数据表格的，（专业的叫法渲染表格）
					elem: '#test', //table的id
					toolbar: '#toolbarDemo', //开启头部工具栏
					//请求的地址
					url:' /wk3un7/commodityServlet', //请求服务器的连接地址
					where: {
						method:'getAllListJsonFour'
					},  
					method: 'POST', //请求的方式
					cols: [
						[{
							field: 'id',
							title: '图片编号',
							width: 100,
							
						}, {
							field: 'imgUrl',
							title: '商品图片',
							width: 150,
							templet:'#imgtmp',
							style: 'height:100px;',
						}, {
							field: 'imgTitle',
							title: '商品名称',
							width: 180,
						}, {
							field: 'Name',
							title: '商品分类',
							width: 180,
						}, {
							title: '<i class="layui-icon" style=" color: dodgerblue; font-size: 19px;">&#xe631;操作</i> ',
							width: 250,
							toolbar: '#barDemo'
						}]
					],
					id:'testReload',//写了一个Id，目的是一会从新加载表格用的
					page: true,
					limit:5,
				});
				table.on('toolbar(test)', function(obj) { //监听的是头部的工具栏，toolbar
					switch(obj.event) {
						case 'addUser':
							//							layer.msg('添加用户');
							layer.open({ //打开一个页面
								type: 2, //在当前的页面之上，弹框形式，展示出添加用户的界面
								area: ['500px', '400px'], //页面的宽高
								content: 'imgAdd.jsp', //页面所在的位置
								title: '添加商品',
								end:function(){
									window.location.reload();//当窗口关闭之后刷新页面
								}
							});
							break;
					};
				});
				table.on('tool(test)', function(obj) { //tool监听的是行内工具栏
					if(obj.event === 'del') {
						$.post( ' /wk3un7/commodityServlet',{"id":obj.data.id,method:'Onedelete'},
						//确保数据没有问题就进行ajax提交了
							function(data) {
								if(data.count>0){
									console.log('删除成功');
									window.location.reload();//当窗口关闭之后刷新页面
								}
							}, "json");
					} else if(obj.event === 'edit') {
						console.log(obj.data);
						layer.open({ //打开一个页面
							type: 2, //在当前的页面之上，弹框形式，展示出添加用户的界面
							area: ['500px', '400px'], //页面的宽高
							content: 'imgUpdate.jsp', //页面所在的位置
							title: '修改商品信息',
							success: function(layero,index){
								var body=layer.getChildFrame('body',index);
								body.contents().find("#id").val(obj.data.id);
								body.contents().find("#imgUrl").val(obj.data.imgUrl);
								body.contents().find("#imgTitle").val(obj.data.imgTitle);
								body.contents().find("#Name").val(obj.data.productId);
							},
							end:function(){
								window.location.reload();//当窗口关闭之后刷新页面
							}
						});
					} else if(obj.event === 'addRole') {
						layer.open({ //打开一个页面
								type: 2, //在当前的页面之上，弹框形式，展示出添加用户的界面
								area: ['500px', '400px'], //页面的宽高
								content: 'userlong.jsp', //页面所在的位置
								title: '角色'
							});
					}
				});
				
				//给search一个点击事件
				//当我执行点击的收走这个方法 search是button的id
				$('#search').on('click',function(){
					var name=$("#txtName").val();//上面搜索框的id
					table.reload('testReload',{//testReload,是上面渲染表格的id
						where:{//接口需要的两个请求参数
							'userName':name
						}
					});
				});
				//跳转网页
				var tz=document.getElementById("webs");
				tz.onclick=function () {
					var url=document.getElementById("tiaozhuang").value;
					
					if (url != null) {
						location.href=url;
					}
				}
			
			});
		</script>
</body>
</html>